<template>
  <div class="myDiv">
    <Header title="体检类型价格信息"></Header>
    <!-- 购买用户 -->
    <el-table
      v-if="this.userkind==1"
      size="mini"
      v-loading="loading"
      :data="vesssel"
      border
      height="508"
      center
      style="width: 100%"
      :stripe="true"
      :cell-style="{padding:'9px 0'}"
    >
      <el-table-column align="center" prop="value" fixed label="体检类别" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="price" label="体检价格(元)" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="catcode" label="设备编码" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" label="操作" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button @click="updatePrice(scope.row)" type="text" size="mini">修改价格</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 租聘用户 -->
    <el-table
      v-else
      size="mini"
      :data="vesssel"
      v-loading="loading"
      height="458"
      border
      style="width: 100%"
      :stripe="true"
      :cell-style="{padding:'9px 0'}"
    >
      <el-table-column
        align="center"
        prop="dictionaryName"
        fixed
        label="体检类别"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column align="center" prop="price" label="体检价格(元)" show-overflow-tooltip></el-table-column>
    </el-table>
    <pag :total="total" @pagenum="pagenum"></pag>
    <!-- 修改价格的弹框 -->
    <el-dialog
      width="80%"
      center
      :show-close="false"
      title="更新体检价格"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="form">
        <el-form-item label="体检类型名称:" :label-width="formLabelWidth">
          <el-input :readonly="true" v-model="form.value" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="套餐费用:" :label-width="formLabelWidth">
          <el-input v-model="form.price" type="number" :clearable="true" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateCategoryPrice">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 提示信息弹框 -->
    <el-dialog title="提示" center :show-close="false" :visible.sync="dialogVisible" width="70%">
      <span>{{this.content}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Header from "@/components/header";
import pag from "@/components/pagination";
export default {
  components: { Header, pag },
  props: {},
  data() {
    return {
      userkind: "",
      page: 1,
      rows: 10,
      total: 0,
      form: {},
      formLabelWidth: "100px",
      dialogVisible: false,
      content: "",
      loading: true,
      dialogFormVisible: false,
      tableData: [], //全部数据
      vesssel: [] //页面临时数据
    };
  },
  watch: {
    page: function() {
      if (this.page == 1) {
        this.vesssel = this.tableData.slice(0, this.rows);
      } else if (this.page == Math.ceil(this.tableData.length / this.rows)) {
        this.vesssel = this.tableData.slice((this.page - 1) * this.rows);
      } else {
        this.vesssel = this.tableData.slice(
          (this.page - 1) * this.rows,
          this.rows * this.page
        );
      }
    }
  },
  computed: {},
  methods: {
    pagenum(data) {
      this.page = data[0];
      this.rows = 10;
    },
    selectUserKind() {
      //判断是购买模式或者管理员还是租赁模式
      if (
        this.$store.state.userinfo.userkind == 1 ||
        this.$store.state.userinfo.id == 1
      ) {
        //购买模式
        this.userkind = this.$store.state.userinfo.userkind;
        this.selectAllDataByOrgcode();
      } else if (this.$store.state.userinfo.userkind == 2) {
        //租赁模式
        this.selectSetMealByOrgcode();
      }
    },
    // 购买用户或管理员
    selectAllDataByOrgcode() {
      let result = [];
      this.$http(this.api.selectOrganizationAddressByDeviceNo).then(res => {
        if (res.status === 200) {
          if (res.data.result == "true") {
            result = res.data.pageData.data;
          }
        }
        this.$http(this.api.selectAllDataByOrgcode).then(res => {
          if (res.status === 200) {
            if (res.data.result == "true") {
              let data = res.data.pageData.data;
              // for (let i = 0; i < result.length; i++) {
              //   for (let j = 0; j < data.length; j++) {
              //     if (result[i].deviceNo == data[j].catcode) {
              //       data[j].catcode = result[i].address;
              //     }
              //   }
              // }
              // console.log(result);
              this.total = res.data.pageData.total;
              this.tableData = res.data.pageData.data;
              this.loading = false;
              this.vesssel = this.tableData.slice(0, this.rows);
            }
          }
        });
      });
    },
    // 租聘用户
    selectSetMealByOrgcode() {
      this.$http(this.api.selectSetMealByOrgcode).then(res => {
        if (res.status === 200) {
          this.total = res.data.pageData.total;
          this.tableData = res.data.pageData.data;
          this.loading = false;
          this.vesssel = this.tableData.slice(0, this.rows);
        }
      });
    },
    //修改价格的弹框
    updatePrice(row) {
      if (row.catcode == null) {
        this.dialogVisible = !this.dialogVisible;
        this.content = "默认价格不可更改,请先绑定设备信息！";
      } else {
        this.dialogFormVisible = !this.dialogFormVisible;
        this.form = row;
      }
    },
    // 确认修改价格
    updateCategoryPrice() {
      this.dialogFormVisible = !this.dialogFormVisible;
      this.$http(this.api.updateCategoryPrice, {
        name: this.form.name,
        price: this.form.price,
        value: this.form.value,
        isdel: this.form.isdel,
        catcode: this.form.catcode
      }).then(res => {
        this.dialogVisible = !this.dialogVisible;
        this.content = res.data.message;
      });
    }
  },
  created() {
    this.selectUserKind();
  },
  mounted() {}
};
</script>
<style scoped>
.myDiv {
}
</style>